<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>交易记录 - 好运网</title>
    <link rel="stylesheet" type="text/css" href="/css/basic.css"/>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
    <link rel="stylesheet" type="text/css" href="/css/center.css"/>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
</head>
<body>

<div th:fragment="records">

    <a name="records"></a>
    <div class="tk_all_moeny" style="background: #fff;font-weight: normal;">
        <div class="m40l m10t" style="line-height: 25px;"><b>交易记录</b><br>只显示近一个月的消息,如需更多信息请联系客服查询</div>
    </div>
    <ul class="shijin m40l">
        <a href="/records/timeRange/1/#records">
            <li th:attr="class=${session.recordTimeRange==1}? 'cover' : null">今天</li>
        </a>
        <a href="/records/timeRange/3/#records">
            <li th:attr="class=${session.recordTimeRange==3}? 'cover' : null">三天内</li>
        </a>
        <a href="/records/timeRange/7/#records">
            <li th:attr="class=${session.recordTimeRange==7}? 'cover' : null">一周内</li>
        </a>
        <a href="/records/timeRange/30/#records">
            <li th:attr="class=${session.recordTimeRange==30}? 'cover' : null">一个月内</li>
        </a>
        <a href="/records/timeRange/365/#records">
            <li th:attr="class=${session.recordTimeRange==365}? 'cover' : null">一年内</li>
        </a>
    </ul>
    <ul class="ckjl m40l">
        <a href="/records/type/1/#records">
            <li th:attr="class=${session.recordType==1}? 'cover' : null">提款记录</li>
        </a>
        <a href="/records/type/2/#records">
            <li th:attr="class=${session.recordType==2}? 'cover' : null">存款记录</li>
        </a>
        <a href="/records/type/3/#records">
            <li th:attr="class=${session.recordType==3}? 'cover' : null">转账记录</li>
        </a>
        <a href="/records/type/4/#records">
            <li th:attr="class=${session.recordType==4}? 'cover' : null">反水记录</li>
        </a>
        <a href="/records/type/5/#records">
            <li th:attr="class=${session.recordType==5}? 'cover' : null">余额调整</li>
        </a>
    </ul>

    <div class="xiam">
        <!-- 提款 -->
        <div class="mokl" th:if="${session.recordType==1}">
            <p class="w218">订单号</p>
            <p class="w120">金额</p>
            <p class="w218">时间</p>
            <p class="w86">状态</p>
            <p class="w120">备注</p>
        </div>
        <!-- 存款 -->
        <div class="mokl" th:if="${session.recordType==2}">
            <p class="w218">订单号</p>
            <p class="w120">金额</p>
            <p class="w86">存款方式</p>
            <p class="w218">时间</p>
            <p class="w86">状态</p>
            <p class="w120">备注</p>
        </div>
        <!-- 转账 -->
        <div class="mokl" th:if="${session.recordType==3}">
            <p class="w218">订单号</p>
            <p class="w86">类型</p>
            <p class="w86">转出</p>
            <p class="w86">转入</p>
            <p class="w218">时间</p>
            <p class="w86">状态</p>
        </div>
        <!-- 反水 -->
        <div class="mokl" th:if="${session.recordType==4}">
            <p class="w218">订单号</p>
            <p class="w120">金额</p>
            <p class="w120">状态</p>
            <p class="w120">类型</p>
            <p class="w218">时间</p>
        </div>
        <!-- 余额 -->
        <div class="mokl" th:if="${session.recordType==5}">
            <p class="w218">订单号</p>
            <p class="w120">类型</p>
            <p class="w120">变动</p>
            <p class="w120">余额</p>
            <p class="w218">时间</p>
        </div>
        <div style="overflow: auto;height: 500px;">
            <div id="dataPage"></div>
            <div id="dataElem" style="text-align: center;"></div>
        </div>
    </div>

    <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
    <script src="/js/layui/layui.js" charset="utf-8"></script>
    <script th:inline="javascript">
        var dataList = [[${list}]];
        var recordType = [[${session.recordType}]];
        console.log(dataList);
    </script>
    <script>
        //调用分页
        layui.use(['laypage', 'layer'], function () {
            var laypage = layui.laypage, layer = layui.layer;
            /* 提款 */
            if (recordType == 1) {
                laypage.render({
                    elem: 'dataElem'
                    , count: dataList.withdrawalPageList.length
                    , limit: 8
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById('dataPage').innerHTML = function () {
                            var arr = [],
                                thisData = dataList.withdrawalPageList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<ul class="mokl-c">' +
                                    '<li class="w218">' + item.withdrawalNo + '</li>' +
                                    '<li class="w120">' + item.requestWithdrawalAmount + '</li>' +
                                    '<li class="w218">' + showLocale(new Date(item.createTime)) + '</li>' +
                                    '<li class="w86">' + item.statusStr + '</li>' +
                                    '<li class="w120">' + item.remark + '</li></ul>');
                            });
                            return arr.join('');
                        }();
                    }
                });
            }

            /* 存款 */
            if (recordType == 2) {
                laypage.render({
                    elem: 'dataElem'
                    , count: dataList.depositOrderPageList.length
                    , limit: 8
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById('dataPage').innerHTML = function () {
                            var arr = [],
                                thisData = dataList.depositOrderPageList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<ul class="mokl-c">' +
                                    '<li class="w218">' + item.orderNo + '</li>' +
                                    '<li class="w120">' + item.requestDepositAmount + '</li>' +
                                    '<li class="w86">' + item.depositChannelType + '</li>' +
                                    '<li class="w218">' + showLocale(new Date(item.createTime)) + '</li>' +
                                    '<li class="w86">' + item.statusStr + '</li>' +
                                    '<li class="w120">' + item.remark + '</li></ul>');
                            });
                            return arr.join('');
                        }();
                    }
                });
            }

            /* 转账 */
            if (recordType == 3) {
                laypage.render({
                    elem: 'dataElem'
                    , count: dataList.transferPagList.length
                    , limit: 8
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById('dataPage').innerHTML = function () {
                            var arr = [],
                                thisData = dataList.transferPagList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<ul class="mokl-c">' +
                                    '<li class="w218">' + item.transferNo + '</li>' +
                                    '<li class="w86">' + item.transferTypeStr + '</li>'+
                                    '<li class="w86">' + item.fromGame + '</li>' +
                                    '<li class="w86">' + item.toGame + '</li>' +
                                    '<li class="w218">' + showLocale(new Date(item.createTime)) + '</li>'+
                                    '<li class="w86">' + item.statusStr + '</li></ul>' );

                            });
                            return arr.join('');
                        }();
                    }
                });
            }

            /* 反水 */
            if (recordType == 4) {
                laypage.render({
                    elem: 'dataElem'
                    , count: dataList.gameRebateList.length
                    , limit: 8
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById('dataPage').innerHTML = function () {
                            var arr = [],
                                thisData = dataList.gameRebateList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<ul class="mokl-c">' +
                                    '<li class="w218">' + item.rebateNo + '</li>' +
                                    '<li class="w120">' + item.amount + '</li>'+
                                    '<li class="w120">' + rebateStatus(item.status) + '</li>' +
                                    '<li class="w120">' + item.gameType + '</li>' +
                                    '<li class="w218">' + showLocale(new Date(item.createTime)) + '</li></ul>' );

                            });
                            return arr.join('');
                        }();
                    }
                });
            }

            /* 余额 */
            if (recordType == 5) {
                laypage.render({
                    elem: 'dataElem'
                    , count: dataList.balanceLogList.length
                    , limit: 8
                    , jump: function (obj) {
                        //模拟渲染
                        document.getElementById('dataPage').innerHTML = function () {
                            var arr = [],
                                thisData = dataList.balanceLogList.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<ul class="mokl-c">' +
                                    '<li class="w218">' + item.orderNo + '</li>' +
                                    '<li class="w120">' + balanceType(item.type) + '</li>'+
                                    '<li class="w120">' + (item.operator + item.requestAmount) + '</li>' +
                                    '<li class="w120">' + item.afterBalance + '</li>' +
                                    '<li class="w218">' + showLocale(new Date(item.updateTime)) + '</li></ul>' );

                            });
                            return arr.join('');
                        }();
                    }
                });
            }
        });

        function showLocale(objD) {
            var str;
            var yy = objD.getYear();
            if (yy < 1900) yy = yy + 1900;
            var MM = objD.getMonth() + 1;
            if (MM < 10) MM = '0' + MM;
            var dd = objD.getDate();
            if (dd < 10) dd = '0' + dd;
            var hh = objD.getHours();
            if (hh < 10) hh = '0' + hh;
            var mm = objD.getMinutes();
            if (mm < 10) mm = '0' + mm;
            var ss = objD.getSeconds();
            if (ss < 10) ss = '0' + ss;
            str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
            return (str);
        }

        function transferStatus(status) {
            switch (status){
                case 1:
                    return "pending";
                case 2:
                    return "pengdingHold";
                case 3:
                    return "processing";
                case 4:
                    return "success";
                case 5:
                    return "reject";
                case 6:
                    return "submitted";
                case 7:
                    return "review";
            }
        }

        function depositStatus(status) {
            switch (status){
                case 1:
                    return "pending";
                case 2:
                    return "pengdingHold";
                case 3:
                    return "review";
                case 4:
                    return "success";
                case 5:
                    return "reject";
                case 6:
                    return "pendingDoc";
            }
        }

        function withdrawalStatus(status) {
            switch (status){
                case 1:
                    return "pending";
                case 2:
                    return "pengdingHold";
                case 3:
                    return "processing";
                case 4:
                    return "success";
                case 5:
                    return "reject";
                case 6:
                    return "submitted";
                case 7:
                    return "review";
            }
        }

        function rebateStatus(status) {
            switch (status){
                case 1:
                    return "pending";
                case 2:
                    return "success";
            }
        }

        function balanceType(type) {
            switch (type){
                case 1:
                    return "存款";
                case 2:
                    return "取款";
                case 3:
                    return "rebate";
                case 4:
                    return "bonus";
                case 5:
                    return "commission";
                case 6:
                    return "fraud";
                case 7:
                    return "other";
            }
        }
    </script>
</div>

</body>

</html>


